import React, {Component} from 'react'
import {Card, Table} from 'antd'
import {connect} from 'react-redux'
import http from '@/http'
import {actionFunc} from './store'
import {fromJS} from 'immutable'


class Home extends Component {
    componentDidMount(){
        // http.ajax({url:'/test/data',showLoading: false}).then((res)=>{
        //     console.log(res.data)
        //     const data = res.data
        //     data.map((item)=>{
        //         return item.key = item.id
        //     })
        //     this.props.updateListData(fromJS(data))
        // }).catch(()=>{
        //
        // })
    }
    render() {
        const {list} = this.props
        return (
            <div>
                <Card title='表格'>
                    <Table
                        dataSource={list.toJS()}
                        columns={
                            [
                                {
                                    title: 'name',
                                    dataIndex: 'name'
                                },
                                {
                                    title: 'age',
                                    dataIndex: 'age'
                                },
                                {
                                    title: 'level',
                                    dataIndex: 'level'
                                },
                                {
                                    title: 'address',
                                    dataIndex: 'address'
                                }
                            ]
                        }
                    />
                </Card>
            </div>


        )
    }
}

const mapState = (state) => ({
    list: state.getIn(['home','list']),
})
const mapDispatch = (dispatch) => ({
    updateListData(data){
        dispatch(actionFunc.changeListData(data))
    }
})

export default connect(mapState, mapDispatch)(Home)
